<template>
  <header class="header">
    <h1>todos</h1>
    <!-- 全选 -->
    <input
      v-model="isCheckedAll"
      id="toggle-all"
      class="toggle-all"
      type="checkbox"
    />
    <label for="toggle-all"></label>
    <!-- 输入框 -->
    <input
      v-model.trim="todo"
      @keyup.enter="addTodo"
      class="new-todo"
      placeholder="输入任务名称-回车确认"
      autofocus
    />
  </header>
</template>

<script>
export default {
  data () {
    return {
      todo: ''
    }
  },
  props: {
    list: Array
  },
  // 计算属性
  computed: {
    // 基于list 是否全部isDone true 决定是否勾选全选
    // every
    isCheckedAll: {
      get () {
        // 如果数组的长度为0 直接返回 false
        if (this.list.length === 0) {
          return false
        }
        return this.list.every(v => {
          if (v.isDone === true) {
            return true
          } else {
            return false
          }
        })
      },
      set (value) {
        // console.log('value:', value)
        this.list.forEach(v => (v.isDone = value))
      }
    }
  },
  methods: {
    addTodo () {
      if (this.todo) {
        // 非空
        // console.log(this.todo)
        // 传递给父组件
        // 参数1 事件名 有意义
        // 参数2 传递给父组件的数据
        this.$emit('addTodo', this.todo)
        // 清空
        this.todo = ''
      } else {
        // 空
      }
    }
  }
}
</script>
